<template>
  <div class="wrap">
    <!-- 订单时间 -->
   <div class="ordertime">
    <span>订单时间&emsp;</span>
    <el-date-picker
      v-model="orderTime"
      type="daterange"
      range-separator="-"
      value-format="yyyy-MM-dd"
      value-change="staticdatechange"
      @change="changedate"
      >
    </el-date-picker>
   </div>

    <!-- 订单类型 -->
    <div class='ordertype'>
      <span>订单类型&emsp;</span>
      <el-select v-model="orderType" filterable placeholder="" @change="changeType">
      <el-option
        v-for="item in orderOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    </div>

    <!-- 输入订单类型/姓名 -->
    <div class="demo-input-suffix">
      <el-input
        placeholder="输入订单编号/患者姓名"
        v-model="numberOrName"
        class="numberName"
      >
      <i slot="suffix" class="el-input__icon el-icon-search" @click='tosearch'></i>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime:"",
      numberOrName: "",
      orderOptions: [
         {
          value: '',
          label: '全部'
        },{
          value: '处方开立',
          label: '处方开立'
        },
        {
          value: '待办',
          label: '待办'
        },
        {
          value: '开立中',
          label: '开立中'
        }
        ],
      orderType: ''
    };
  },
  methods:{
    tosearch(){
      this.$emit("searchStaticData",this.numberOrName);
    },
    changeType(){
      this.$emit("changeStaticType",this.orderType);
    },
    changedate(){
      // console.log(this.orderTime);
      this.$emit("changeStaticdate",this.orderTime);
    }
  }
};
</script>

<style lang='less' scoped>
.wrap {
  height: 75px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // 订单类型
  .ordertype,.ordertime{
    font-size:12px;
    color:#686868;
    margin-right:25px;
  }
  .ordertime{
    .el-input__inner{width: 225px;}
  }
  .ordertype{
    /deep/.el-input--small{width: 142px;}
  }

  /deep/.numberName {
    .el-input__inner {
      border-radius: 4px;
      border: 0;
    }
    .el-input__suffix {
      background-color: #666ee8;
      border-radius: 4px;
    }
    width: 355px;
    border: 1px solid #666ee8;
    border-radius: 4px;
  }
  /deep/.el-input__suffix {
    right: -2px;
    width: 35px;
    cursor: pointer;
    border: 0;
    height: 33px;
  }
}
</style>